$drawer: 240px;
@import '../node_modules/codemirror/lib/codemirror.css';
@import '../node_modules/codemirror/theme/panda-syntax.css';
@media (min-width: 620px) {
  ::-webkit-scrollbar {
    width: 15px;
    background: #fafafa;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #9a9898;
    border: 2px solid #fafafa;
    border-top: 4px solid #fafafa;
    border-bottom: 4px solid #fafafa;
    &:hover {
      background-color: #8a8787;
    }
    &:active {
      background-color: #747272;
    }
  }
  ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  .app.dark {
    main {
      &::-webkit-scrollbar {
        background: #303030;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #696767;
        border: 2px solid #303030;
        border-top: 4px solid #303030;
        border-bottom: 4px solid #303030;
        &:hover {
          background-color: #7d7b7b;
        }
        &:active {
          background-color: #5a5a5a;
        }
      }
    }
    ::-webkit-scrollbar {
      background: #424242;
      width: 7px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #696767;
      border: 2px solid #424242;
      border-top: 4px solid #424242;
      border-bottom: 4px solid #424242;
      &:hover {
        background-color: #7d7b7b;
      }
      &:active {
        background-color: #5a5a5a;
      }
    }
    ::-webkit-scrollbar-button {
      display: none;
      width: 0;
      height: 0;
    }
    ::-webkit-scrollbar-corner {
      background-color: transparent;
    }
  }
}

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #303030;
  &.fade-in .app {
    opacity: 1;
    margin-top: 0;
    border-radius: 0;
    transform: initial;
  }
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.app {
  height: 100%;
  width: 100%;
  display: block;

  opacity: 0;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out,
    margin 0.6s ease-in-out, border-radius 1s ease-in-out;
  transform: scale(0.95);
  margin-top: 50px;
  border-radius: 10px;
  overflow: hidden;
  &.dark {
    background-color: #303030;
    h1 {
      color: #f1f1f1;
    }
    button {
      > span {
        &:nth-child(1) {
          color: #fff;
        }
      }
      &:disabled {
        > span {
          opacity: 0.3;
        }
      }
    }
  }
  header {
    button {
      &.signed-in {
        padding: 4px 16px;
        min-height: 64px;
        max-height: 64px;
        border-radius: 0;
      }
    }
  }
  li.active {
    user-select: none;
    opacity: 1;
    background-color: rgba(64, 80, 181, 0.25);
    &:hover {
      background-color: rgba(64, 80, 181, 0.35);
    }
    div {
      h3 {
        color: #2c3886;
      }
    }
  }
}

pre {
  ::selection {
    background: #64b9eb;
  }
  ::-moz-selection {
    background: #64b9eb;
  }
}

/**
 * Inject page
 */
.inject {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  &:not(.active-client) {
    .requires-active {
      opacity: 0.4 !important;
      pointer-events: none !important;
    }
  }
  .inject-list-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    min-width: 200px;
    flex-shrink: 0;
    width: 220px;
    z-index: 500;
    box-shadow: -10px 0 5px 10px #191919;
    background: #2a2a2a;
    user-select: none !important;
    .inject-list-header {
      color: #fefeff;
      text-align: center;
      svg {
        vertical-align: middle;
        margin-right: 10px;
        fill: #aab6ea;
      }
    }
    .inject-clients {
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .graph {
      box-shadow: -12px 3px 8px #2a2a2a;
      z-index: 1;
      position: sticky;
      text-align: center;
      padding-bottom: 10px;
      .chart {
        overflow: hidden;
      }
      button.execute-all {
        opacity: 0.3;
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
          box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.2s ease;
        &:hover {
          opacity: 1;
        }
      }
      svg {
        height: 120px;
        padding-left: 7px;
        margin: 0 auto;
        display: block;
        .domain {
          stroke: rgba(128, 128, 128, 0.26);
        }
        circle {
          fill: rgba(174, 182, 224, 0.57) !important;
          &.data-point {
            opacity: 0;
          }
        }
        text {
          fill: rgba(141, 159, 255, 0.54);
          font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
        }
        .axis.x text {
          display: none;
        }
      }
    }
    ul {
      li {
        &.active {
          background-color: rgba(77, 97, 206, 0.7);
          &:hover {
            background-color: rgba(95, 118, 241, 0.7);
          }
          div {
            h3 {
              color: #f1f1f1;
            }
          }
        }
        img {
          width: 20px;
          margin-right: 10px;
        }
      }
    }
    h3 {
      color: #cecfe0;
    }
    ::-webkit-scrollbar {
      background: #2a2a2a !important;
      &:disabled {
        width: 0;
      }
    }
    ::-webkit-scrollbar-thumb {
      background-color: #4d525c !important;
      border: 2px solid #2a2a2a !important;
      border-top: 4px solid #2a2a2a !important;
      border-bottom: 4px solid #2a2a2a !important;
      &:hover {
        background-color: #616770 !important;
      }
      &:active {
        background-color: #1e1e1e !important;
      }
    }
  }
  .inject-editor-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    .chrome-tabs {
      flex-shrink: 0;
      display: flex;
      box-sizing: border-box;
      position: relative;
      font-size: 10px;
      height: 4.2em;
      background: linear-gradient(#4c4c4c, #585858);
      padding: 1em 1.2em 0.45em 1.2em;
      box-shadow: 0 0.05em #282828;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol';
      * {
        box-sizing: inherit;
        font-family: inherit;
      }
      .inject-list-menu {
        display: none;
      }
      .chrome-tabs-previous,
      .chrome-tabs-next {
        width: 18px;
        z-index: 499;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.57 38"><path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgba(255,255,255,0.9)" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M18.54 2L2 18.86 18.57 36"/></svg>');
        background-repeat: no-repeat;
        background-position: 0 50%;
        background-size: 8px;
        opacity: 0.2;
        transition: 0.1s opacity ease;
        &.required {
          cursor: pointer;
          opacity: 1;
          &::after {
            content: '';
            height: 100%;
            width: 17px;
            background: linear-gradient(
              to right,
              #535353 17%,
              transparent 100%
            );
            display: block;
            margin-left: 18px;
          }
          &:hover {
            opacity: 1;
          }
        }
      }
      .chrome-tabs-next {
        transform: scaleX(-1);
      }
      .chrome-tabs-bottom-bar {
        position: absolute;
        bottom: 0;
        height: 0.45em;
        left: 0;
        width: 100%;
        background: #1f1f1f;
        box-shadow: 0 -1px 2px 0 rgba(30, 30, 30, 0.35);
        z-index: 499;
      }
      .chrome-tabs-content {
        position: relative;
        width: 100%;
        height: calc(100% + 30px);
        overflow-x: scroll;
        overflow-y: hidden;
        &::-webkit-scrollbar {
          display: none;
        }
      }
      .chrome-tab {
        position: absolute;
        left: 0;
        height: 2.8em;
        width: 24em;
        border: 0;
        margin: 0;
        z-index: 1;
        user-select: none;
        cursor: default;
        animation-name: tab-added-pop;
        animation-timing-function: ease;
        animation-duration: 0.2s;
        * {
          user-select: none;
        }
        &.pageghost {
          .chrome-tab-actions {
            button.pageghost {
              background-color: rgba(181, 63, 63, 0.2);
              svg {
                color: rgba(230, 37, 37, 0.83);
              }
            }
          }
        }
        &.chrome-tab-current {
          z-index: 498;
          .chrome-tab-background > svg .chrome-tab-background {
            fill: #1e1e1e;
          }
        }
        .chrome-tab-background {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          pointer-events: none;
          > svg {
            width: 100%;
            height: 100%;
            .chrome-tab-shadow {
              fill: none;
              stroke: rgba(0, 0, 0, 0.5);
              stroke-width: 0.5px;
            }
            .chrome-tab-background {
              transition: fill 0.2s ease;
              fill: #3a3939;
              transform: translateX(0.25px) translateY(0.25px);
            }
          }
        }
        &.devtools {
          .chrome-tab-background {
            > svg {
              .chrome-tab-background {
                fill: #8e4dff !important;
              }
            }
          }
          &.pageghost {
            .chrome-tab-actions {
              button.pageghost {
                background-color: rgba(255, 255, 255, 0.3);
                svg {
                  color: #fff;
                }
              }
            }
          }
        }
      }
      &.chrome-tabs-sorting .chrome-tab:not(.chrome-tab-currently-dragged),
      &:not(.chrome-tabs-sorting) .chrome-tab.chrome-tab-just-dragged {
        transition: transform 120ms ease-in-out;
      }
      .chrome-tab-favicon {
        position: relative;
        margin-left: 1.6em;
        height: 1.6em;
        width: 1.6em;
        background-size: 1.6em;
        margin-top: 0.6em;
        z-index: 3;
        display: inline-block;
        vertical-align: top;
        pointer-events: none;
      }
      .chrome-tab-title {
        -webkit-font-smoothing: antialiased;
        position: relative;
        display: inline-block;
        vertical-align: top;
        color: #fff;
        padding: 0 0.25em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.2em;
        margin-top: 0.5em;
        margin-left: 0.4em;
        max-width: calc(100% - 8.3em);
        pointer-events: none;
      }
      .chrome-tab-actions {
        position: absolute;
        right: 1.4em;
        height: 100%;
        // Tooltip gets crushed if set lower
        width: 100%;
        padding-top: 2px;
        display: inline-block;
        text-align: right;
        button {
          height: 100%;
          width: 26px;
          svg {
            color: rgba(255, 255, 255, 0.9);
            width: 0.7em;
            height: 0.7em;
          }
        }
      }
    }
    .inject-editor-view {
      display: flex;
      width: 100%;
      height: 100%;
      background-color: #1e1e1e;
      .inject-editor {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width: 100%;
        height: 100%;
        .react-monaco-editor-container,
        .react-codemirror2 {
          z-index: 499;
          overflow: hidden;
          background-color: #1e1e1e;
        }
        .inject-console {
          position: relative !important;
          height: 60%;
          color: rgb(213, 213, 213);
          background: #242424;
          border-top: 1px solid #505050;
          font-size: 12px !important;
          font-family: Consolas, Lucida Console, Courier New, monospace;
          word-wrap: break-word;
          flex-shrink: 0;
          .react-contextmenu-wrapper {
            height: 100%;
            width: 100%;
            .inject-console-content {
              overflow-y: scroll;
              height: 100%;
              width: 100%;
              .console-message-wrapper {
                display: flex;
                border-bottom: 1px solid rgb(240, 240, 240);
                border-bottom-color: rgb(43, 43, 43);
                &:last-of-type {
                  margin-bottom: 15px;
                }
                &.return {
                  .console-indicator {
                    display: inline-block !important;
                    background-position: 0px 70px;
                  }
                }
                &.warn {
                  color: rgb(255, 220, 158);
                  border-top: 1px solid rgb(102, 85, 0);
                  border-bottom: 1px solid rgb(102, 85, 0);
                  background-color: hsl(50, 100%, 10%);
                  margin-top: -1px;
                  .console-indicator {
                    display: inline-block !important;
                    background-position: -60px 10px;
                  }
                }
                &.error {
                  color: hsl(0, 100%, 75%);
                  border-top: 1px solid rgb(91, 0, 0);
                  border-bottom: 1px solid rgb(91, 0, 0);
                  background-color: hsl(0, 100%, 8%);
                  margin-top: -1px;
                  .console-indicator {
                    display: inline-block !important;
                    background-position: -40px 70px;
                  }
                }
                .console-message {
                  clear: right;
                  position: relative;
                  padding: 3px 22px 1px 0;
                  margin-left: 24px;
                  min-height: 18px;
                  flex: auto;
                  display: flex;
                  width: calc(100% - 24px);
                  .console-timestamp {
                    color: rgb(127, 127, 127);
                    flex: none;
                    margin-right: 5px;
                    user-select: none;
                  }
                  .console-indicator {
                    display: none;
                    position: absolute;
                    background-image: url('/assets/ui/devtools.png');
                    width: 10px;
                    height: 10px;
                    left: -17px;
                    top: 4px;
                  }
                  .source-code {
                    font-size: 12px !important;
                    width: 100%;
                    white-space: pre-wrap;
                    .message-group > span {
                      display: inline-block;
                      vertical-align: top;
                      padding-left: 5px;
                      &:first-of-type {
                        padding-left: 0;
                      }
                      li {
                        background-color: transparent !important;
                        div {
                          &:hover {
                            background-color: rgba(255, 220, 158, 0.1);
                            border-radius: 3px;
                          }
                        }
                      }
                    }
                    .undefined,
                    .null,
                    .broadcast {
                      color: rgb(127, 127, 127);
                    }
                    .broadcast {
                      font-style: italic;
                    }
                    .boolean,
                    .number {
                      color: hsl(252, 100%, 75%);
                    }
                    .string {
                      &.quotes {
                        color: rgb(233, 63, 59);
                        .quotes {
                          color: rgb(213, 213, 213);
                        }
                      }
                    }
                    .promise {
                      font-style: italic;
                      span {
                        opacity: 0.7;
                      }
                    }
                    .react-json-view,
                    .pretty-json-container,
                    .object-content {
                      display: inline-block;
                    }
                    a {
                      color: rgb(171, 171, 171);
                      text-decoration: underline;
                      transition: color 0.1s ease;
                      &:hover {
                        color: rgb(211, 211, 211);
                      }
                    }
                    .react-json-view {
                      background: none !important;
                    }
                  }
                }
              }
              .react-inspector-table {
                .react-contextmenu-wrapper > div {
                  margin-bottom: 10px;
                }
              }
              &::-webkit-scrollbar {
                width: 14px;
                background-color: #242424;
              }
              &::-webkit-scrollbar-track {
                box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3);
              }
              &::-webkit-scrollbar-thumb {
                border-radius: 2px;
                border: none;
                background-color: #333 !important;
                box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
              }
            }
          }
        }
      }
      .inject-pageghost {
        z-index: 500;
        position: relative !important;
        flex-shrink: 0;
        background: #191919;
        border-top-left-radius: 4px;
        border-left: 1px solid #3e3d3d;
        max-width: calc(100% - 20px) !important;
        .resizer:hover,
        .resizer:active {
          background-color: rgba(148, 148, 148, 0.2);
        }
      }
    }
  }
}

/**
 * Code editors
 */
.monaco-editor .view-overlays .current-line {
  border: none !important;
  background-color: rgba(24, 24, 24, 0.897);
}
.mtk5 {
  color: #99c794 !important;
}
.mtk12.PropertyAssignment {
  color: #99c794;
}
.mtk12.PropertyAssignment.PropertyAccessExpression {
  color: #fac863;
}
.mtk12.Identifier.JsxOpeningElement {
  color: #ec5f67;
}
.mtk12.Identifier.JsxExpression.JsxClosingElement {
  color: #ec5f67;
}
.mtk12.Identifier.JsxClosingElement {
  color: #ec5f67 !important;
}
.mtk12.Identifier.JsxSelfClosingElement {
  color: #ec5f67;
}
.mtk12.Identifier.VariableStatement.JsxClosingElement {
  color: #ec5f67 !important;
}
.mtk12.VariableStatement.JsxSelfClosingElement.Identifier {
  color: #ec5f67;
}
.mtk12.Identifier.JsxAttribute.VariableDeclaration {
  color: #aa759f;
}
.mtk12.JsxExpression.VariableStatement {
  color: #fac863;
}
.mtk12.VariableStatement.JsxSelfClosingElement {
  color: #e0e0e0;
}
.mtk12.VariableStatement.JsxClosingElement {
  color: #e0e0e0;
}
.mtk12.JsxElement.JsxText {
  color: #e0e0e0;
}
.JsxText {
  color: #e0e0e0;
}
.react-codemirror2 {
  height: 100%;
  .CodeMirror {
    height: 100%;
    background: #1e1e1e !important;
    font-size: 0.8em;
    .CodeMirror-gutters {
      background: #1e1e1e !important;
    }
  }
}

/**
 * Data page
 */
.data {
  .row {
    cursor: pointer;
  }
  .inspector {
    * {
      cursor: pointer;
    }
  }
}

/**
 * Data modal
 */
.data-modal {
  ::-webkit-scrollbar {
    width: 15px;
    background: #151515;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #4b4b4b;
    border: 2px solid #151515;
    border-top: 4px solid #151515;
    border-bottom: 4px solid #151515;
    &:hover {
      background-color: #5e5e5e;
    }
    &:active {
      background-color: #464646;
    }
  }
}

/**
 * Remove background from react-inspector
 */
.inspector {
  > li {
    overflow: hidden;
  }
  li {
    background-color: transparent !important;
  }
}

.resizer {
  transition: background-color 0.3s ease;
  z-index: 1000;
  &:hover,
  &:active {
    background-color: rgba(0, 0, 0, 0.32);
  }
  &.light {
    &:hover,
    &:active {
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
}

@media (max-width: 650px) {
  .inject {
    .inject-list-container {
      transform: translateX(-400px);
      transition: transform 0.3s ease;
      pointer-events: none;
      width: 256px !important;
      .resizer {
        display: none !important;
      }
    }
    .inject-editor-container {
      margin-left: -256px;
      transition: filter 0.3s ease;
      .chrome-tabs {
        height: 5em;
        padding-left: 0;
        .chrome-tabs-content {
          padding-top: 8px;
        }
        .chrome-tab {
          animation-name: tab-added-fade;
        }
        .inject-list-menu {
          display: block;
          cursor: pointer;
          fill: #fff;
          margin: 0.2em 1em;
        }
      }
      // .inject-console {
      //   height: 50% !important;
      // }
    }
    &.open {
      .inject-list-container {
        box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
          0px 16px 24px 2px rgba(0, 0, 0, 0.14),
          0px 6px 30px 5px rgba(0, 0, 0, 0.12);
        z-index: 999;
        transform: initial;
        pointer-events: initial;
      }
      .inject-editor-container {
        filter: brightness(35%);
        * {
          pointer-events: none !important;
        }
      }
    }
  }
  .react-contextmenu {
    padding: 8px 0 !important;
    .react-contextmenu-item {
      padding: 10px 20px !important;
      font-size: 12px !important;
      &.react-contextmenu-item--divider {
        padding: 0 !important;
      }
    }
  }
}

/**
 * Context menu
 */

.react-contextmenu {
  background-color: #5f5f65;
  padding: 4px 0;
  border-radius: 3px;
  z-index: 9999999999999;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  color: #e6e6e6;
  font-size: 11px;
  min-width: 150px;
  opacity: 0;
  transition: opacity 0.2s ease;
  outline: none;
  user-select: none;
  text-align: left;
  &.react-contextmenu--visible {
    opacity: 1;
  }
  .react-contextmenu-item {
    outline: none;
    cursor: pointer;
    padding: 7px 15px;
    &:hover {
      background-color: #7f7f9c;
      color: #efefef;
    }
    &.react-contextmenu-item--divider {
      height: 1px;
      background-color: rgba(255, 255, 255, 0.07);
      padding: 0;
      margin: 5px 0;
    }
  }
}

.copy-to-clipboard-container {
  position: absolute;
}

@keyframes tab-added-pop {
  from {
    top: 10px;
    opacity: 0.6;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes tab-added-fade {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
